<template>
<div class="cart">
 <van-nav-bar
  title='购物车'
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
 />
<van-swipe-cell
v-for="prod in cart"
 :key="prod.clue_id">
 <van-card
  class="goods-card"
  :price="prod.price"
  :title="prod.title"
  :thumb="prod.image"
 >
 <template #thumb>
 <van-checkbox
  checked-color="#ee0a24"
  icon-size="16"
  :style="{marginRight: '6px'}"
  :value="prod.checked"
  @click="handleModifyChecked(prod.id)"
 ></van-checkbox>
 <div
  class="van-image"
  style="width: 75%; height: 100%;">
  <img :src="prod.image" class="van-image__img" style="object-fit: cover;">
 </div>
</template>
 <template #num>
  <van-stepper
   :value="prod.amount"
   theme="round"
   button-size="16"
   @change="handleChangeAmount($event, prod.id)"
  />
 </template>
 </van-card>
 <template #right>
  <van-button
  square text="删除"
  type="danger"
  @click="handleRemove(prod.id)"
  class="delete-button"
  />
 </template>
</van-swipe-cell>
<van-empty description="暂时没有添加任何商品" v-if="cart.length === 0"/>
 <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="adress">
   <van-checkbox
    :value="allChecked"
    @click.stop="handleCheckAll"
    checked-color="#ee0a24"
   >全选</van-checkbox>
   <template #tip>
    你的收货地址不支持同城送, <span>修改地址</span>
   </template>
  </van-submit-bar>
</div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'AppCart',
  computed: {
    cart() {
      return this.$store.state.cart.list
    },
    allChecked() {
      return this.$store.getters.allChecked
    },
    totalMoney() {
      return this.$store.getters.totalMoney
    },
  },
  methods: {
    ...mapMutations(['checkedAll']),
    adress() {
      this.$router.push('./adress')
    },
    onClickLeft() {
      this.$router.back()
    },
    handleRemove(id) {
      this.$store.commit('removeFromCart', { id })
    },
    handleChangeAmount(amount, id) {
      this.$store.commit('modifyAmount', { id, amount })
    },
    handleModifyChecked(id) {
      this.$store.commit('modifyChecked', { id })
    },
    handleCheckAll() {
      this.checkedAll({ checked: !this.allChecked })
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: white;
 }

 .delete-button {
  height: 100%;
 }
 ::v-deep.van-card__thumb {
  display: flex;
  width: 120px;
 }
 ::v-deep.van-checkbox {
  margin-right: 6px;
 }
</style>
